import React from 'react';
import PropTypes from 'prop-types';
import s from './MapInfo.module.css';
import Tabs, { TabPane } from '@kuiper-components/tabs';
import MapIcon from './MapIcon';
import WorldBox from './WorldBox';
import ChinaBox from './ChinaBox';
import cn from 'classnames';
import LogoSvg from './LogoSvg';
import fetch from 'API/fetch';
import { datetime } from '../../../../common/formatter';
export default function MapInfo({ className, getTime }) {
	const [activeKey, setActiveKey] = React.useState('world');
	const [worldIcon, setWorldIcon] = React.useState('worldActive');
	const [changTop, setChangTop] = React.useState(
		`-${(3 * window.innerWidth) / 1920}rem`
	);
	const [bugStore, setBugStore] = React.useState([]);
	const [account, setAccount] = React.useState({});
	const [region, setRegion] = React.useState({});
	const [seebug, setSeebug] = React.useState({});

	async function getData() {
		let time = '';
		const center = await fetch('/api/v2/index/monitor-center', {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (center.code === 200) {
			setAccount(center.results.account);
			setRegion(center.results.region);
			time = center.results.update_time;
		}
		const seebug = await fetch('/api/v2/index/seebug/get', {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (center.code === 200) {
			setSeebug(seebug.results[0]);
		}
		const vulndb = await fetch('/api/v2/index/get_vulndb', {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (vulndb.code === 200) {
			setBugStore(vulndb.results);
			datetime(time) > datetime(vulndb.results.update_at)
				? getTime(datetime(time))
				: getTime(datetime(vulndb.results.update_at));
		}
	}
	const [chinaIcon, setChinaIcon] = React.useState('china');
	const handleTabChange = category => {
		setActiveKey(category);
		if (category === 'world') {
			setWorldIcon('worldActive');
			setChinaIcon('china');
		} else {
			setWorldIcon('world');
			setChinaIcon('chinaActive');
		}
	};
	React.useEffect(() => {
		getData();
		window.onresize = function () {
			if (window.innerWidth >= 1920) {
				setChangTop(`-3rem`);
			} else {
				setChangTop(`-${window.innerWidth / 1440}rem`);
			}
		};
	}, []);
	return (
		<div className={cn(className, s.MapInfo)}>
			<div className={s.title}>
				<span className={s.text}>监测中心</span>
			</div>
			<Tabs
				className={s.tabs}
				type="card"
				activeKey={activeKey}
				tabBarPosition="top"
				onChange={handleTabChange}
			>
				<TabPane key="world" tab={<MapIcon name={worldIcon} />}>
					<div className={s.logo} style={{ top: changTop }}>
						<LogoSvg />
					</div>
					<WorldBox
						chang={changTop}
						bugStore={bugStore}
						seebug={seebug}
						account={account}
						active={handleTabChange}
					></WorldBox>
				</TabPane>
				<TabPane key="china" tab={<MapIcon name={chinaIcon} />}>
					<div className={s.logo2}>
						<LogoSvg />
					</div>
					<ChinaBox
						chang={changTop}
						region={region}
						account={account}
					></ChinaBox>
				</TabPane>
			</Tabs>
		</div>
	);
}
MapInfo.propTypes = {
	className: PropTypes.string,
	task: PropTypes.string,
	getTime: PropTypes.any,
};
MapInfo.defaultProps = {
	className: s.MapInfo,
};
